<!--  -->
<template>
  <div class="">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert title="添加商品信息" type="info" center> </el-alert>
      <el-steps :active="currentIndex - 0" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="left"
   
      >
        <el-tabs
          tab-position="left"
          v-model="currentIndex"
          :before-leave="beforeLeaveTab"
          @tab-click="tabClick"
        >
          <el-tab-pane label="用户管理" name="0">
            <el-form-item label="商品名称" prop="goodsname">
              <el-input
                placeholder="请输入商品名称"
                v-model="ruleForm.goodsname"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input
                placeholder="请输入商品价格"
                v-model="ruleForm.price"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="height">
              <el-input
                placeholder="请输入商品重量"
                v-model="ruleForm.height"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="count">
              <el-input
                placeholder="请输入商品数量"
                v-model="ruleForm.count"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="count">
              <el-cascader
                v-model="selectGoodsKey"
                :options="goodsList"
                :props="{
                  expandTrigger: 'hover',
                  value: 'id',
                  label: 'goodsname',
                  children: 'children',
                  checkStrictly: false,
                }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <el-checkbox-group v-model="onlyData">
              <el-checkbox  :label="item" v-for="(item,index) in onlyData" :key="index" border></el-checkbox>
          
          
            </el-checkbox-group>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
                 <el-form-item label="商品名称" prop="goodsname">
              <el-input
                placeholder="请输入商品名称"
                v-model="ruleForm.goodsname"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input
                placeholder="请输入商品价格"
                v-model="ruleForm.price"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="height">
              <el-input
                placeholder="请输入商品重量"
                v-model="ruleForm.height"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="count">
              <el-input
                placeholder="请输入商品数量"
                v-model="ruleForm.count"
              ></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="3">
             <el-upload
  class="upload-demo"
  action="http://localhost:4008/user/picture"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture"
  :headers="headers"
  name='picture'
  >
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过200kb</div>
</el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <quill-editor v-model="editValue"></quill-editor>
            <el-button @click="add()" type="primary">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {

  },
  data() {
    //这里存放数据
    return {
      ruleForm: {
        goodsname: "",
        price: 0,
        height: 0,
        count: 0,
      },
      rules: {
        goodsname: [
          { required: true, trigger: "blur", message: "请输入商品名称" },
        ],
        price: [{ required: true, trigger: "blur", message: "请输入商品价格" }],
        height: [
          { required: true, trigger: "blur", message: "请输入商品重量" },
        ],
        count: [{ required: true, trigger: "blur", message: "请输入商品总数" }],
      },
      currentIndex: "0",
      selectGoodsKey: [],
      goodsList: [],
      onlyData:[],
      fileList:[],
      headers:{
        Authorization:window.sessionStorage.getItem("token")
      },
      editValue:'',
     
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async requestGoods() {
      let { data: res } = await this.$http.get("/goods");
      console.log(res);
      if (res.err == 0) {
        this.$message.success("数据请求成功");
        this.goodsList = res.data;
      } else {
        this.$message.error("数据请求失败");
      }
    },
    async getRequestParmas() {
      let type = { type: "only" };
      if (this.selectGoodsKey.length == 3) {
        let { data: res } = await this.$http.get("/goodsParmas", {
          params: type,
        });
        console.log(res);
        if (res.err == 0) {
          this.$message.success("数据请求成功");
         var  goodstag = res.data[0].children;
            for(var i in goodstag){ 
              this.onlyData.push(goodstag[i].goodstag)
            }
        }
      }
    },
    handleChange() {
      console.log(this.selectGoodsKey.length);
    },
    beforeLeaveTab(activeName, oldActiveName) {
      if (oldActiveName == 0 && this.selectGoodsKey.length !== 3) {
        this.$message.error("您未选择三级分类");
        return false;
      }
    },

    tabClick(active,old){     
      if(this.currentIndex==1){
      
        this.getRequestParmas()
        
      }
      
    },
    handlePreview(file){
      console.log(file);
      
    },
    handleRemove(){},
    ready(){
      console.log(123);
      
    },
    add(){
      this.$refs.ruleForm.validate(async valid=>{
        if(valid){
        let {data} =  await this.$http.post("goodsList/addlist",{goodsname:this.ruleForm.goodsname,
        price:this.ruleForm.price,height:this.ruleForm.height})
        console.log(data);
        if(data.err==0){
          this.$message.success(data.msg)
          this.$router.push("goods_list")
        }else{
          this.$message.errer("商品添加失败")
        }
        
        }else{
          this.$message.error("请完成商品名称的添加")
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.requestGoods();
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  deactivated() {},
};
</script>
<style  scoped>
.el-steps {
  margin: 10px 0 10px 0;
}
.el-checkbox{
  margin: 10px;
}

</style>